<template>
  <div class="qwe">
    <div class="zxc">
      <p class="asd">财务管理</p>
    </div>
    <div class="head">
      <p style="font-weight: 900; margin-left: 30px; margin-right: 10px">
        输入搜索
      </p>
      <el-input
        v-model="input"
        placeholder="请输入内容"
        style="width: 200px; margin-right: 40px"
      ></el-input>
      <p style="font-weight: 900; margin-right: 30px">下单时间</p>
      <template>
        <div class="block">
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="开始日期"
            style="width: 140px"
          >
          </el-date-picker>
        </div>
        <p style="color: skyblue">&emsp;······&emsp;</p>
        <div class="block">
          <el-date-picker
            v-model="value2"
            align="right"
            type="date"
            placeholder="结束日期"
            :picker-options="pickerOptions"
            style="width: 140px"
          >
          </el-date-picker>
        </div>
      </template>
      <div>
        <el-button type="primary" style="margin-left: 40px" @click="searfun"
          >查询</el-button
        >
        <el-button style="margin-left: 40px" @click="reset">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      input: "",
    };
  },
  methods: {
    //查询
    searfun() {
      this.$emit("SEARfun", this.input);
    },

    // 重置
    reset() {
      this.$emit("RET", this.search);
      this.input = "";
    },
  },
};
</script>


<style >
.head {
  height: 70px;
  background: #fff;
  display: flex;
  align-items: center;
}

.asd {
  border-left: 6px solid rgb(45, 98, 245);
  font-size: 18px;
  padding-left: 10px;
}
.zxc {
  height: 50px;
  display: flex;
  align-items: center;
  background-color: #fff;
  padding-left: 20px;
}
</style>